import React, { PureComponent } from 'react';
// import { connect } from 'dva';
import style from "styled-components";
import {
  Input,
  Button,
  Form,
  Select,
  // DatePicker,
  // InputNumber,
  // Radio,
  // Icon,
  message,
} from 'antd';
import Drawer from 'react-motion-drawer';
// import PSelect from "../../../components/Pro/PSelect";
// import * as api from "../../../services/api";

import {
  getDictInformation, //公共信息
  enterprisePerSendGetRemark,//获取收到的简历备注
  enterprisePerSendResumeRemark, //收到的简历备注
} from "../../../services/api";



const FormItem = Form.Item;
const { Option } = Select;
// const RadioGroup = Radio.Group;
const { TextArea } = Input;
message.config({
  top: 100,
  right: 5,
  duration: 2,
});

// @connect(state => ({ profile: state.profile }))
@Form.create()

// 收到的简历备注
export default class CollectionResumesRemarks extends PureComponent {
  constructor(props, context) {
    super(props, context);
    this.state = {
      open: this.props.visiable,//备注
      currentId: this.props.currentId,//当前ID
      communicatePreStatus: [],//沟通前状态
      communicateStatus: [],//沟通中状态
      communicateAfterStatus: [],//沟通后状态
      agreeInterviewStatus: [],//同意面试后
    };

  }
  /******************************生命周期******************************/

  componentDidMount = () => {
    this.getAllType();//获取所有类型
    // this.getRemarkInfo();//获取收到的简历备注
  }
  componentWillReceiveProps = (nextProps) => {
    if (this.props.currentId !== nextProps.currentId) {
      this.setState({ open: nextProps.visiable, currentId: nextProps.currentId }, () => {
        this.getRemarkInfo();
      });
    }else{
      this.setState({ open: nextProps.visiable, currentId: nextProps.currentId });
    }
  }
  /******************************ajax请求******************************/
  /******************************相关事件******************************/
  //获得公共信息
  getAllType = () => {
    getDictInformation({ codeTypes: [' communicatePreStatus', ' communicateStatus', ' communicateAfterStatus', 'agreeInterviewStatus'] }).then((res) => {
      console.log('所有沟通状态res:', res);
      //判断获取数据是否为空
      if (res.data) {
        const allTypeData = res.data;
        this.setState({
          communicatePreStatus: allTypeData.communicatePreStatus,
          communicateStatus: allTypeData.communicateStatus,
          communicateAfterStatus: allTypeData.communicateAfterStatus,
          agreeInterviewStatus: allTypeData.agreeInterviewStatus,
        });
      }
    });
  };

  getRemarkInfo = () => {
    enterprisePerSendGetRemark({ sendResumeId: this.state.currentId }).then(
      response => {
        const { communicatePreStatus, communicateStatus, communicateAfterStatus, agreeInterviewStatus, remark } = response.data;
        // const newRemarkInfo = {
        //   communicatePreStatus,
        //   communicateStatus,
        //   communicateAfterStatus,
        //   agreeInterviewStatus,
        //   remark
        // };
        const { setFieldsValue } = this.props.form;
        setFieldsValue({
          communicatePreStatus,
          communicateStatus,
          communicateAfterStatus,
          agreeInterviewStatus,
          remark
        });
        // console.log("getRemarkInfo",response);
        // this.setState({remarkInfo:newRemarkInfo});//其他说明
      },
    );
  }
  //表单提交
  handleRemarksSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log("values", values);
        console.log("Id", this.state.currentId);
        enterprisePerSendResumeRemark({
          sendResumeId: this.state.currentId,//当前简历ID
          communicatePreStatus: values.communicatePreStatus,//沟通前状态
          communicateStatus: values.communicateStatus,//沟通中状态
          communicateAfterStatus: values.communicateAfterStatus,//沟通后状态
          agreeInterviewStatus: values.agreeInterviewStatus,//同意面试后
          remark: values.remark,//其他说明
        }).then((res) => {
          console.log("成功信息-保存收到简历备注：", res);
          message.success("保存成功！");
          this.setState({ open: false });
        }, (error) => {
          message.error(error);
          console.log("错误信息-保存收到简历备注：", error);
        });
      }
    });
  }
  //沟通前
  renderBeforeState = () => {
    return this.state.communicatePreStatus.map((val, key) => {
      return <Option key={key} value={val.codeValue + ""}>{val.label}</Option>;
    });
  };

  //沟通中
  renderMiddleState = () => {
    return this.state.communicateStatus.map((val, key) => {
      return <Option key={key} value={val.codeValue + ""}>{val.label}</Option>;
    });
  };

  //沟通后
  renderAfterState = () => {
    return this.state.communicateAfterStatus.map((val, key) => {
      return <Option key={key} value={val.codeValue + ""}>{val.label}</Option>;
    });
  };

  //同意面试后
  renderAfterAgreeingInterviewState = () => {
    return this.state.agreeInterviewStatus.map((val, key) => {
      return <Option key={key} value={val.codeValue + ""}>{val.label}</Option>;
    });
  };

  /******************************render******************************/

  render() {
    const formItemLayout = {
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 7
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 17
        },
        md: {
          span: 17
        }
      }
    };
    const { getFieldDecorator } = this.props.form;

    // debugger
    // console.log(this.state.communicatePreStatus);

    return (
      <Box>
        <Drawer
          overlayColor="rgba(0, 0, 0,0)"
          right
          open={this.state.open}
          noTouchClose
          width={600}
          zIndex={2}
          className="drawer-box"
          onChange={(open) => {
            this.props.onChange(open);
            this.setState({ open });
          }}
        >
          <div className="drawer">
            <div className="drawer-header">备注</div>
            <div className="drawer-content">
              <Form onSubmit={this.handleRemarksSubmit}>
                <FormItem {...formItemLayout} label="沟通前">
                  {getFieldDecorator('communicatePreStatus', {
                    rules: [
                      {
                        required: false,
                        message: "该字段必填"
                      }
                    ]
                  })(
                    <Select placehold er="请选择">
                      <Option value=" ">请选择</Option>
                      {this.renderBeforeState()}
                    </Select>
                    )}
                </FormItem>
                <FormItem {...formItemLayout} label="沟通中">
                  {getFieldDecorator('communicateStatus', {
                    rules: [
                      {
                        required: false,
                        message: "该字段必填"
                      }
                    ]
                  })(
                    <Select placeholder="请选择">
                      <Option value=" ">请选择</Option>
                      {this.renderMiddleState()}
                    </Select>
                    )}
                </FormItem>
                <FormItem {...formItemLayout} label="沟通后">
                  {getFieldDecorator('communicateAfterStatus', {
                    rules: [
                      {
                        required: false,
                        message: "该字段必填"
                      }
                    ]
                  })(
                    <Select placeholder="请选择">
                      <Option value=" ">请选择</Option>
                      {this.renderAfterState()}
                    </Select>
                    )}
                </FormItem>
                <FormItem {...formItemLayout} label="同意面试后">
                  {getFieldDecorator('agreeInterviewStatus', {
                    rules: [
                      {
                        required: false,
                        message: "该字段必填"
                      }
                    ]
                  })(
                    <Select placeholder="请选择">
                      <Option value=" ">请选择</Option>
                      {this.renderAfterAgreeingInterviewState()}
                    </Select>
                    )}
                </FormItem>
                <FormItem {...formItemLayout} label="其他说明">
                  {getFieldDecorator('remark', {
                    rules: [
                      {
                        required: true,
                        message: "该字段必填"
                      }
                    ]
                  })(
                    <TextArea style={{ width: 294 }} rows={4} placeholder="请填写其他说明" />
                    )}
                </FormItem>
              </Form>
            </div>
            <div className="drawer-footer">
              <Button onClick={() => this.setState({ open: false })}>取消</Button>
              <Button type="primary" htmlType="submit" onClick={this.handleRemarksSubmit}>保存备注</Button>
            </div>
          </div>
        </Drawer>
      </Box>
    );
  }
}

/************************样式************************/

const Box = style.div`{
  .drawer-content{
    margin-top:28px;
  }
}`;